<template>
	<div class="pic-container">
		<div class="img_div" v-for="(item,index) in urls" :key="index">
      <img :src="item" class="pic-container-image">
      <a href="#">
        <div class="mask">
          <i class="el-icon-delete item-icon" @click="delone(index)"></i>
        </div>
      </a>
    </div>
    <el-upload
      action=""
      :http-request="Upload"
      list-type="picture-card" 
      class="upload-demo"
      :limit="10"
      :show-file-list="false">
      <i class="el-icon-plus"></i>
    </el-upload>
	</div>
</template>

<script>
	import client  from 'common/js/ossClient.js'
	export default {
		name:'UploadMore',
		props:{
			urls:{
				type:Array,
				default: ()=>[]
			},
			limitnum:{
				type:Number,
				default:4
			},
			filedir:{
				type:String,
				default:'default'
			}
		},
		methods:{
			Upload(file) {
				if(this.urls.length >= this.limitnum){
					this.$message.error("超出上传个数上限！")
          return
				}
        const tmpcnt = file.file.name.lastIndexOf(".")
        const exname = file.file.name.substring(tmpcnt + 1)
        const names = ['jpg', 'jpeg', 'webp', 'png','bmp']
        if(names.indexOf(exname)< 0 ){
          this.$message.error("不支持的格式!")
          return
        }
        const myloading = this.$loading({
          lock: true,
          text: '拼命上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let uid = parseInt(file.file.uid)
        let randnum = Math.random() * 10000000000000
        randnum = Math.floor(randnum)
        let name_num = randnum + uid
        let fileName =this.filedir + '/' + name_num + '.' + exname
        client.put(fileName, file.file).then(res=>{
          if(res.url){
            this.$emit('finishUpload',res.url)
            myloading.close();
          }else{
            this.$message.error('文件上传失败')
            myloading.close();
          }
        }).catch(err=>{})
      },
      delone(index){
      	this.$emit('delone',index)
      }
		}
	}
</script> 

<style scoped>
	.pic-container{
    display:flex;flex-direction:row;height:80px;width:100%;
  }
  .pic-container-image{
    width:80px;height:80px;border-radius:5px;
  }
  .img_div {
    display:flex;position: relative;width:80px;height:80px;margin:0 5px;
  }
  .mask {
    position: absolute;top: 0;left: 0;width: 80px;height: 80px;background: rgba(101, 101, 101, 0.6);opacity: 0;border-radius:5px;display:flex;align-items:center;justify-content:center;
  }
  .img_div a:hover .mask {
    opacity: 1;           
  }
  .item-icon{
    zoom:1.4;color:#FFF;
  }
  .upload-demo /deep/ .el-upload--picture-card{
    height:80px;width:80px;line-height:80px;
  }
  .upload-demo /deep/ .el-upload-list__item{
    height:80px;width:80px;line-height:80px;
  }
</style>